<template>
	<div :class="ns.b()">
		<div v-if="$slots['form']" :class="ns.e('form')">
			<slot name="form"></slot>
		</div>
		<div :class="ns.e('table')">
			<slot name="table"></slot>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useNamespace } from "@/hooks";
import { onMounted, provide } from "vue";
const ns = useNamespace("default-layout");

onMounted( () => {
	computedHeihgt();
});
function computedHeihgt() {
	// 布局器 DOM
	const layout = document!.querySelector(".zj-default-layout")!;
	// 表单父容器
	const form = layout!.querySelector(".zj-default-layout__form");
	// 表格父容器
	const tableParent = layout!.querySelector(".zj-default-layout__table") as HTMLElement;
	// 表格
	const table = layout!.querySelector(".zj-default-layout__table .el-table")! as HTMLElement;
	// 表格中的分页器
	const pagination = layout!.querySelector(
		".zj-default-layout__table .htf-table-pagination"
	)! as HTMLElement;
	// 顶部 side
	const header = document.querySelector(".zj-header");
	const layoutCss = getComputedStyle(layout);
	const tableParentCss = getComputedStyle(tableParent);

	if (form && table && layout) {
		// 布局器 上下padding
		const layoutPaddnig =
			Number.parseInt(layoutCss.paddingTop) + Number.parseInt(layoutCss.paddingBottom);
		// form 高度加下边距
		const formOccupancyHeight =
			form?.clientHeight + Number.parseInt(getComputedStyle(form).marginBottom);
		// 分页高度加上边距
		const paginationOccupancyHeight =
			pagination?.clientHeight + Number.parseInt(getComputedStyle(pagination)?.marginTop);
		// 顶部 side 高度
		const headerOccupancyHeight = header?.clientHeight || 0;
		// 高度
		const subHeight = layoutPaddnig + formOccupancyHeight + headerOccupancyHeight;
		// 表格父容器 padding border + pagenation
		const tableContent =
			Number.parseInt(tableParentCss.paddingTop) +
			Number.parseInt(tableParentCss.paddingBottom) +
			paginationOccupancyHeight +
			6;
		setMainHeight(tableParent, subHeight);
		setTableHeight(table, subHeight, tableContent);
	}
}

function setMainHeight(el: HTMLElement, subHeight: number) {
	el.style.maxHeight = `calc(100vh - ${subHeight}px)`;
	el.style.minHeight = `calc(100vh - ${subHeight}px)`;
	el.style.overflow = `scroll`;
}
function setTableHeight(el: HTMLElement, subHeight: number, pHeight: number) {
	el.style.maxHeight = `calc(100vh - ${subHeight + pHeight}px)`;
	el.style.minHeight = `calc(100vh - ${subHeight + pHeight}px)`;
	el.style.overflow = `scroll`;
}
</script>

<style lang="scss" scoped>
$ns: default-layout;

@include block($ns) {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	// padding: 20px;
	box-sizing: border-box;

	@include element(form) {
		flex-shrink: 0;
		// background-color: var(--bg-color-light1);
		margin-bottom: 8px;
		padding: 10px;
		box-sizing: border-box;
		// border-radius: 3px;
		padding: 20px 20px 0px 20px;
		border-radius:4px;
    	border: 1px solid #e4e7ed;
    	background-color: #fff;
	}

	@include element(table) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		// background-color: var(--bg-color-light1);
		padding: 10px;
		box-sizing: border-box;
		padding: 20px;
		border-radius:4px;
    	border: 1px solid #e4e7ed;
    	background-color: #fff;
	}
}
</style>
